<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        title="商品管理介绍"
        name="1"
        style="width: 98%; margin: 0 auto; margin-bottom: 10px"
      >
        <div>
          商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="条件查询"
        name="2"
        style="width: 90%; margin: 0 auto; margin-bottom: 10px"
      >
        <!-- 条件查询 -->
        <el-card class="card" shadow="never">
          <!-- 条件查询内容 -->
          <div>
            <el-form
              size="mini"
              :inline="true"
              :model="searchFrom"
              class="demo-form-inline"
            >
              <el-form-item label="商品名称" class="users">
                <el-input
                  v-model="searchFrom.name"
                  placeholder="商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品货号" class="users">
                <el-input
                  v-model="searchFrom.brandId"
                  placeholder="商品货号"
                ></el-input>
              </el-form-item>
              <el-form-item label="品牌：">
                <el-select
                  size="mini"
                  v-model="searchFrom.brandName"
                  value-key="id"
                  placeholder="品牌"
                  class="users"
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上架状态：">
                <el-select
                  size="mini"
                  v-model="searchFrom.publishStatus"
                  value-key="id"
                  placeholder="上架状态"
                  class="users"
                >
                  <el-option
                    v-for="item in homeinfo"
                    :key="item.id"
                    :label="item.value"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核状态：">
                <el-select
                  size="mini"
                  v-model="searchFrom.verifyStatus"
                  value-key="id"
                  placeholder="审核状态"
                  class="users"
                >
                  <el-option
                    v-for="item in data"
                    :key="item.id"
                    :label="item.value"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="usered">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="doSearch">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>

    <SkuDetail ref="SkuDetail" />
    <!-- 文章列表table表单 -->
    <el-card shadow="never" class="card">
      <div slot="header" class="clearfix">
        <template slot-scope="scope">
          <el-button type="primary" size="default" @click="add(scope.row.id)"
            >新增</el-button
          >
          <el-button type="primary" size="default" @click="addss"
            >导出商品列表excel文件</el-button
          >
        </template>
      </div>
      <el-table :data="tableData" style="width: 100%" max-height="1000" border>
        <el-table-column fixed type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column
          prop="province"
          label="展示图片"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <img
              style="width: 100px; height: 100px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>

        <el-table-column
          width="300"
          label="商品名称"
          prop="name"
          align="center"
          class="names"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
            <div>品牌:{{ scope.row.brandName }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="商品价格"
          prop="brandName"
          align="center"
        >
          <template slot-scope="scope">
            <div>原价：{{ scope.row.originalPrice }}</div>
            <div>现价：{{ scope.row.originalPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="商品类别"
          prop="productCategoryName"
          align="center"
        >
        </el-table-column>
        <el-table-column label="标签" width="150">
          <template slot-scope="scope">
            <div>
              最新：<el-switch
                v-model="scope.row.newStatus"
                active-color="#409EFF"
                inactive-color="#DCEFE6"
                :active-value="1"
                :inactive-value="0"
                @change="newest(scope.row)"
              >
              </el-switch>
            </div>
            <div>
              推荐：<el-switch
                v-model="scope.row.recommendStatus"
                active-color="#409EFF"
                inactive-color="#DCEFE6"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="标签2" prop="" align="center">
          <template slot-scope="scope">
            <div>
              发布：<el-switch
                v-model="scope.row.publishStatus"
                active-color="#409EFF"
                inactive-color="#DCEFE6"
                :active-value="1"
                :inactive-value="0"
                @change="issue(scope.row)"
              >
              </el-switch>
            </div>
            <div>
              审核：<el-switch
                v-model="scope.row.verifyStatus"
                active-color="#409EFF"
                inactive-color="#DCEFE6"
                :active-value="1"
                :inactive-value="0"
                @change="checked(scope.row)"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="sku" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="openDetail(scope.row.id)"
              >打开Sku</el-button
            >
          </template>
        </el-table-column>
        <el-table-column width="150" label="重量" prop="weight" align="center">
        </el-table-column>
        <el-table-column width="150" label="排序" prop="sort" align="center">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.row.id)"
              type="text"
              size="small"
              style="color: red !important"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pagings">
      <div class="paging">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SkuDetail from './components/SkuDetail.vue'

import product from '@/api/product.js'
import mixin from '@/mixins'
export default {
  mixins: [mixin],
  components: {
    SkuDetail,
  },
  data() {
    return {
      searchFrom: {}, //输入框里的对象
      from: {}, //实际搜索要用的表单
      activeNames: ['1'],
      tableData: [],
      value: '',
      brandList: [],
      values: '', //下拉框选中对象
      homeinfo: [
        {
          label: '0',
          value: '上架',
        },
        {
          label: '1',
          value: '未上架',
        },
      ],
      data: [
        {
          label: '0',
          value: '审核',
        },
        {
          label: '1',
          value: '未审核',
        },
      ],
    }
  },
  created() {},
  mounted() {
    this.productsByPageApi()
    product.findAllBrandApi().then(res => {
      console.log(res, 'aaa')
      this.brandList = res.data.items
    })
  },
  methods: {
    //查询
    doSearch(name) {
      this.page = {
        currentPage: 1, //当前页
        pageSizes: [10, 20, 30, 40],
        pageSize: 10, //每页多少条数据
        total: 0, //总数据条数
      }
      this.from = Object.assign({}, this.searchFrom)
      this.productsByPageApi(name)
      console.log(this.searchFrom, 'this.searchFrom')
      console.log(this.from, 'this.from')
      console.log(name, 'name')
    },
    //重置
    reset() {
      this.searchFrom = {}
      this.from = {}
      this.page = {
        currentPage: 1, //当前页
        pageSizes: [10, 20, 30, 40],
        pageSize: 10, //每页多少条数据
        total: 0, //总数据条数
      }
      this.productsByPageApi()
    },

    handleChange(val) {
      console.log(val, 'val')
    },
    openDetail(row) {
      console.log(row, 'suk的row')
      this.$refs.SkuDetail.open(row)
    },
    //获取商品列表
    productsByPageApi() {
      setTimeout(() => {
        product
          .productsByPageApi(
            this.page.currentPage,
            this.page.pageSize,
            this.from,
            {
              verifyStatus: 1,
            }
          )
          .then(res => {
            if (res.success) {
              this.tableData = res.data.rows
              this.page.total = res.data.total
            } else {
              this.$message.error('请求失败')
            }
            if (this.tableData.newStatus == 0) {
              this.value = false
            } else {
              this.value = true
            }
            console.log(this.tableData, 'this.tableData')
          })
      })
    },
    //删除商品
    deleteRow(row) {
      console.log(row, '删除')
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        product.productdelApi(row).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.productsByPageApi()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.productsByPageApi()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.currentPage = val
      this.productsByPageApi()
    },
    // 是否最新
    newest(row) {
      console.log(row, 'row')
      var ermpStatus = row.newStatus === 1 ? 0 : 1 //如果失败了  0就是1  1就是0
      product
        .switchNewStatusApi({
          productId: row.id,
          status: row.newStatus,
        })
        .then(res => {
          if (res.success) {
            this.$message.success('修改状态成功')
          } else {
            this.$message.error('修改状态失败，请联系管理员')
            row.newStatus = ermpStatus
          }
        })
    },
    // 是否推荐
    changeStatus(row) {
      console.log(row, 'row')
      var ermpStatus = row.recommendStatus === 1 ? 0 : 1 //如果失败了  0就是1  1就是0
      product
        .switchRecommandStatus({
          productId: row.id,
          status: row.recommendStatus,
        })
        .then(res => {
          if (res.success) {
            this.$message.success('修改状态成功')
          } else {
            this.$message.error('修改状态失败，请联系管理员')
            row.recommendStatus = ermpStatus
          }
        })
    },
    //发布
    issue(row) {
      console.log(row, 'row')
      var ermpStatus = row.publishStatus === 1 ? 0 : 1 //如果失败了  0就是1  1就是0
      product
        .switchPublishStatus({
          productId: row.id,
          status: row.publishStatus,
        })
        .then(res => {
          if (res.success) {
            this.$message.success('修改状态成功')
          } else {
            this.$message.error('修改状态失败，请联系管理员')
            row.publishStatus = ermpStatus
          }
        })
    },
    //审核
    checked(row) {
      var ermpStatus = row.verifyStatus === 1 ? 0 : 1 //如果失败了  0就是1  1就是0
      product
        .switchVerifyStatus({
          productId: row.id,
          status: row.verifyStatus,
        })
        .then(res => {
          if (res.success) {
            this.$message.success('修改状态成功')
          } else {
            this.$message.error('修改状态失败，请联系管理员')
            row.verifyStatus = ermpStatus
          }
        })
    },
    add() {
      this.$router.push({ name: 'productDetail' })
    },
    //导出文件
    addss() {
      console.log('导出文件')
      // import('@/vendor/Export2Excel').then(excel => {
      //   console.log(excel, 'excel')
      //   const header = ['商品名称', '商品品牌', '商品价格']
      //   const header_key = ['name', 'brandName', 'originalPrice']
      //   //拼接一个能用的数据
      //   const data = []
      //   this.tableData.forEach(out => {
      //     var innerArr = []
      //     //循环标题key 拼成一个数组
      //     header_key.forEach(inner => {
      //       innerArr.push(out[inner])
      //     })
      //     //吧循环的数据给data
      //     data.push(innerArr)
      //   })
      //   console.log('data====', data)
      //   // return
      //   excel.export_json_to_excel({
      //     header: header, //表头 必填
      //     data: data, //具体数据
      //     filename: 'excel-list', //非必填  文件名称
      //     autoWidth: true, //非必填 是否自适应宽度
      //     bookType: 'xlsx', //非必填   文件格式
      //   })
      // })
    },
  },
}
</script>

<style>
</style>